<template>
  <!-- 页面-员工管理 -->
  <div class="emp innerPageTable-box-OneTwo super-selelct-page">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        slot="adaption-bar"
        ref="empFormRef"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <template>

          <!-- 员工编号 -->
          <Form-item :label="$t('module.employee.employeeNo')">
            <Input
              type="text"
              :maxlength="30"
              v-model="condition.employeeNo"
              :placeholder="$t('module.employee.tip.empId')"
              
              @on-enter="searchHandler"
            ></Input>
          </Form-item>

          <!-- 姓名 -->
          <Form-item :label="$t('module.employee.name')">
            <Input
              type="text"
              :maxlength="30"
              v-model="condition.name"
              :placeholder="$t('module.employee.tip.chnName')"
              
              @on-enter="searchHandler"
            ></Input>
          </Form-item>

          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">
            <RPButton optType="search" @click="searchHandler" />
            <RPButton optType="reset" @click="resetHandler" />
          </Form-item>

        </template>
      </Form>
    </SelfAdaption>
    <InnerPageTable :config="configs" ref="empRef">
      <!-- handler bar 查询/重置-->
      <!--
      <div slot="handle-bar">
        <RPButton optType="search" @click="searchHandler" />
        <RPButton optType="reset" @click="resetHandler" />
      </div>
      -->
    </InnerPageTable>
    <div
      class="tips"
    >{{$t('common.selected')}}: {{currentRow.name? " "+currentRow.name+" ( "+currentRow.employeeNo +" ) " :""}}</div>
  </div>
</template>
<script>
import { getEmployeeList } from "@/api/employeeApi";
import { selectEmpListColumns } from "./columns";
import locales from "./locales.js";
import { CoreModuleName } from "@/const.js";

export default {
  name: "select-supervisor",
  mixins: [locales],
  data() {
    return {
      currentRow: {},
      condition: {
        status: "0",
        name: "",
        employeeNo: "",
        departmentCode: this.departmentCode,
        filterByOrgAndMaster: true
      },
      idTypes: [],
      actions: [
        {
          text: this.$t("common.determine"),
          theme: "primary",
          handle: () => this.confirm()
        },
        {
          text: this.$t("common.close"),
          handle: () => this.$emit("Close")
        }
      ]
    };
  },
  props: {
    departmentCode: {
      type: String,
      default: ""
    }
  },
  computed: {
    configs() {
      const { condition } = this;
      const { userInfo } = $store.state[CoreModuleName];
      if (userInfo.tenantCode) condition.tenantCode = userInfo.tenantCode;
      return {
        loadDataFn: getEmployeeList,
        columnsFn: selectEmpListColumns.bind(this),
        initParam: { condition },
        autoFirst: true,
        highlightRow: true,
        rowClickHandle: this.rowClicked.bind(this)
      };
    }
  },
  created() {
    this.$emit("SetTitle", this.$t("module.employee.selectSupervisor"));
    this.$emit("SetPageWidth", 900);
    this.$emit("SetPageActions", this.actions);
  },
  mounted() {
    this.searchHandler();
  },
  methods: {
    rowClicked() {
      this.currentRow = this.$refs.empRef.currentRow;
    },
    confirm() {
      if (!this.currentRow.employeeNo) {
        this.$message.error({
          content: this.$t("module.employee.selectSupervisor"),
          duration: 3
        });
      } else {
        this.$emit("Close", this.currentRow);
      }
    },
    searchHandler() {
      this.$refs.empRef.load({}, 1);
    },
    resetHandler() {
      // this.$refs.empFormRef.resetFields(1);
      this.condition.name = "";
      this.condition.employeeNo = "";
      this.searchHandler();
    }
  }
};
</script>
<style lang="less">
// ok注释的样式
.super-selelct-page {
  height: 500px !important;
  margin: -10px;
  tr {
    cursor: pointer;
  }
  .tips {
    position: relative;
    top: -38px;
    left: 10px;
  }
  .table-bar{
    margin: 0;
  }
  .search-bar {
    div .ivu-form {
      .ivu-form-item-label {
        padding-right: 0;
      }
      .ivu-form-item {
        display: flex;
        .ivu-form-item-content {
          margin-right: 0 !important;
          margin-left: 0 !important;
          width: calc(~"100% - 70px");
        }
      }
    }
  }
}
</style>
